<!-- 二级页面的标题 -->
<template>
    <!--:to='"/Tow/Three"'-->
    <div class="root">
        <Blur :blur-amount='40' :url='header.image_path|isf' :height='156'>
        <h3 class="fa fa-angle-left" @click='backClick'></h3>
        <div class="box">
            <img :src="header.image_path | isf">
            <!-- 右边信息 -->
            <div class="rightbox">
                <div class="one">
                    <h2>{{header.name}}</h2>
                </div>
                <div class="two">
                    <p class="p1">
                        <span v-if="header.delivery_mode">蜂鸟专送 /</span>
                        <span v-else>商家配送 /</span>
                        <span>{{header.order_lead_time}}分钟送达 /</span>
                        <span>配送费约￥{{header.float_delivery_fee}}</span>
                        <span class="span1 fa fa-angle-right"></span>
                    </p>
                    <p class="p">公告:{{header.promotion_info}}</p>
                </div>
            </div>
        </div>
        <div class='bottom' v-if="header.activities">
            <p>
                <!--<span>{{header.activities.type.tips}}</span>-->
                <span class="s1" :style="{backgroundColor:'#'+header.activities[0].icon_color}">{{header.activities[0].icon_name}}</span>
                <span class="huodong s2">{{header.activities[0].description}}</span>
                <span class="s3">{{header.activities.length}}个活动</span>
            </p>
        </div>
        </Blur>
    </div>
</template>

<script>
import {Blur} from 'vux'
export default {
    components:{
        Blur
    },
    props: ['header'],
    methods:{
         backClick() {
            history.back()
        },
    }
}
</script>

<style scoped>
h3 {
    color: white;
    font-size: 24px;
    margin: 5px 10px;
    /*margin: 0px;*/
}

.root {
    color: white;
}

.box {
    display: flex;
}

img {
    width: 82px;
    height: 82px;
    padding: 3px 8px;
}

.rightbox {
    color: white;
    width: calc(100% - 90px);
    box-sizing: border-box;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.one h2 {
    font-size: 18px;
    margin: 0px;
    flex-basis: 76%;
}

.two {
    margin-top: 2px;
    flex-basis: 35%;
}

.two p {
    color: white;
    margin: 0px;
    line-height: 25px;
}

.two .p {
    margin-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.p1 {
    position: relative;
}

.span1 {
    position: absolute;
    font-size: 18px;
    right: 20px;
}

.bottom p {
    display: flex;
    justify-content: space-between;
}

.bottom p span {
    margin: 5px 10px;
}

.bottom p .s2 {
    margin: 5px 0px 5px -70px;
}
</style>
